view {
  box-sizing: border-box;
}
page {
  height: 100%;
  background: #f2f2f2;
  font-family:-apple-system-font,Helvetica Neue,sans-serif
}
.container {
  height: 100%;
  /*display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;*/
  background: #f6f6f6;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.clearfix{clear: both;}
.fl{float: left;}
.fr{float: right;}

input.input_placeholder{color: #eee;}

scroll-view {-webkit-transform: translateZ(0);-webkit-overflow-scrolling: touch;}

.scoll-h{ height: 100%; z-index: 10; }
   ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
    }

.footbar{width: 101%; height: 100rpx; overflow: hidden; position:fixed; left: 0; bottom:0rpx; z-index:10; background:#fff; box-shadow: 0rpx -2rpx 2rpx #dddddd;  display: flex; flex-direction: row; flex-wrap: nowrap; }
.footbar button{height: 100rpx; line-height: 100rpx; text-align: center; padding: 0; border: 0; border-radius: 0;}
.footbar  button.btn0_hover{background: #eee;}
.footbar .fbtn0{width: 20%; height:100rpx; line-height:40rpx; background: #fff; text-align: center;  overflow: hidden; position: relative; border-top:0rpx #eeeeee solid; border-left:2rpx #eeeeee solid; margin-left: -2rpx; }
.footbar .fbtn0 text{font-size: 30rpx; display: block; color: #666; margin:8rpx auto 0 auto;}
.footbar .fbtn0 .iconfont{display: block; font-size: 45rpx; line-height:45rpx; margin:8rpx auto 0 auto; border: 0;}
.footbar .fbtn0 text.orange{color: #f60;}
.footbar .fbtn1{width:40%; border-radius:0; border: 0; margin: 0; font-size: 35rpx; }
.footbar .fbtn1 .iconfont{font-size: 40rpx; margin-right: 10rpx;}
.footbar .fbtn2{width:25%; border-radius:0; border: 0; margin: 0; font-size: 35rpx; }
.footbar .fbtn2 .iconfont{font-size: 40rpx; margin-right: 10rpx;}
.footbar .fbtn100{width:100%; border-radius:0; border: 0; margin: 0; font-size: 35rpx; }

//uploadBox
.uploadBox{}
.uploadBox .upload_btn{width:200rpx; height:200rpx; float: left; text-align: center; background: #f3f3f3; border:0rpx #cccccc dotted; margin:0 16rpx 16rpx 0; }
.uploadBox .upload_btn .iconfont{font-size:80rpx; line-height:160rpx; display: block; margin:20rpx auto 0 auto; color: #999;}
.uploadBox .upload_img{width:200rpx; height:200rpx; float: left; margin:0 16rpx 16rpx 0; position: relative;}
.uploadBox .upload_img text{width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; position: absolute; right:-10rpx; top:-10rpx; display: block; font-size:25rpx; border-radius: 100%; background: #f90; color: #fff; z-index: 10;}
.uploadBox .upload_img image{width:100%;height:200rpx;}

  .sort{width: 100%; padding: 0 10rpx; background: #fff; height: 80rpx; line-height: 80rpx; display: flex; border-bottom:2rpx #eeeeee solid;}
  .sort button{width: 23%; height: 80rpx; line-height: 80rpx; overflow: hidden; border: 0; color: #999; font-size: 30rpx; position: relative;}
  .sort button.active{color: #f30;}
  .sort .s4{display: flex; padding: 0; justify-content: center;}
  .sort .s4 .txt{}
  .sort .s4 .iconfont{color: #ccc; font-size:16rpx; margin-left:10rpx;}
  .sort .s4.active .iconfont{color: #f30;}
  .sort.fixed{position: fixed; top: 0rpx; z-index: 100;}

/*滚动区域*/
  
//button
button.btn_red{background: #f30; color: #fff; border: 0;}
button.btn_bred{border:1px #ac1f28 solid; color: #ac1f28;}
button.btn_blue{background: #1b1e3d; color: #fff; border: 0;}
button.btn_bblue{border:1px #1b1e3d solid; color: #1b1e3d;}
button.btn_orange{background: #f60; color: #fff; border: 0;}
button.btn_orange_hover{background: #f40;}
button.btn_yellow{background: #f90; color: #fff; border: 0;}
button.btn_borange{border:1px #f60 solid; color: #f60;}
button.btn_gray{background: #eee; color: #303030; border: 0;}
button.btn_gray_hover{background: #999; color: #303030;}
button.btn_bgray{border:1px #999999 solid; color: #303030;}
button.btn_black{background: #303030; color: #fff;}
button.btn_pink{background: #ff5f5f; color: #fff; border: 0;}
button.btn_cyan{background: #0abe73; color: #fff; border: 0;}
//color
.gray{color: #999;}
.red{color: #f00;}
.blue{color:dodgerblue;}
.orange{color: #f60;}

//box_shadow
.box_shadow{border-radius: 10rpx; box-shadow: 2rpx 2rpx 5rpx #eeeeee;}

.countdown{display: inline-block;}


checkbox-group{width: 100%;}
/*  重写 checkbox 样式  */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 背景的宽 */
   height: 40rpx; /* 背景的高 */
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border-color: #ff5f5f;
   background: #ff5f5f;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
   height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;
   height: 40rpx;
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked{
   background:#ff5f5f;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   height: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

.mlist{padding: 20rpx 20rpx; height: auto; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between;}
  .listbox{width: 48.5%; height: auto; overflow: hidden; background: #fff; border-radius: 10rpx; margin:10rpx 0;position: relative;}
  .listbox label{position: absolute; right: 0; top: 0; padding:10rpx; z-index: 100;}
  .listbox .avatar{position: relative;}
  .listbox .avatar image.img{display: block; width:100%; border-radius:8rpx;}
  .listbox .avatar image.tag{display: block; width:80rpx; position: absolute; left: 0; top: 0; z-index: 10;}
  .listbox .box{height:auto; overflow: hidden; padding: 20rpx; text-align: left;}
  .listbox .box .tit{height: 80rpx; overflow: hidden; line-height:40rpx; font-size: 30rpx; color: #464646;}
  .listbox .box .info{height: auto; overflow: hidden; padding:16rpx 0;}
  .listbox .box .commission{font-size: 25rpx; color: #fff; border-radius:30rpx; background: #ff6666; height:50rpx; line-height:50rpx; padding:0 20rpx;}
  .listbox .box .commission text{font-size: 32rpx; color: #ff0; font-weight: bold;}
  .listbox .box .sales{font-size: 25rpx; color: #999; margin-top:10rpx;}
  .listbox .box .price{font-size: 24rpx; color: #f60; margin-top: 10rpx;}
  .listbox .box .price .cprice{font-size: 34rpx; color: #f30; font-weight: bold;}
  .listbox .box .price .oprice{font-size:26rpx; color: #ccc; text-decoration: line-through; display: block; }
  .listbox .box .coupon{width:120rpx; height:60rpx; font-size: 24rpx; color: #fff; display: block; position: relative;}
  .listbox .box .coupon image{width: 100%; display: block;}
  .listbox .box .coupon .txt{position: absolute; width: 100%; height: 60rpx; line-height: 50rpx; text-align: center;}
  .listbox .box .coupon .txt text{color: #ff0; font-size:30rpx; font-weight: bold;}

.mlist1{padding: 20rpx 0; height: auto; overflow: hidden; background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between;}  
  .listbox1{width: 100%; height: auto; overflow: hidden; display: flex; flex-wrap:nowrap; padding:20rpx 30rpx;}
  .listbox1 .avatar{position: relative;}
  .listbox1 .avatar image.img{display: block; width:300rpx; border-radius:8rpx;}
  .listbox1 .avatar image.tag{display: block; width:80rpx; position: absolute; left: 0; top: 0;}
  .listbox1 .box{padding-left: 20rpx; text-align: left;}
  .listbox1 .box .tit{height: 78rpx; overflow: hidden; line-height:1.2; font-size: 30rpx; color: #464646; font-weight:500;}
  .listbox1 .box .info{height: auto; overflow: hidden; padding:18rpx 0 18rpx 0;}
  .listbox1 .box .commission{font-size:30rpx; color: #fff; border-radius:30rpx; background: #f00; height:50rpx; line-height:50rpx; padding:0 20rpx;}
  .listbox1 .box .commission text{font-size: 32rpx; color: #ff0; font-weight: bold;}
  .listbox1 .box .commission .small{font-size: 22rpx; color: #fff; font-weight: normal;}
  .listbox1 .box .sales{font-size: 28rpx; color: #999; margin-top:10rpx;}
   .listbox1 .box .bt{ display: block; height: auto; overflow: hidden; margin: 10rpx 0 15rpx 0; }
  .listbox1 .box .price{ height:52rpx; line-height:52rpx; overflow: hidden; border:2rpx #f00 solid; display: flex; border-radius: 10rpx;}
  .listbox1 .box .price .txt{background: #f00; color: #fff;font-size: 26rpx; padding: 0 4rpx;}
  .listbox1 .box .price .cprice{font-size: 20rpx; color: #f00; margin: 0 10rpx; line-height:48rpx;}
  .listbox1 .box .price .cprice text{font-size: 34rpx;font-weight: bold;}
  .listbox1 .box .coupon{width:120rpx; height:60rpx; font-size: 24rpx; color: #fff; display: block; position: relative;}
  .listbox1 .box .coupon image{width: 100%; display: block;}
  .listbox1 .box .coupon .txt{position: absolute; width: 100%; height: 60rpx; line-height: 50rpx; text-align: center;}
  .listbox1 .box .coupon .txt text{color: #ff0; font-size:32rpx; font-weight: bold;}
  .listbox1 .box .bt1 .post{float: left; padding:4rpx 10rpx; font-size: 24rpx; color: #fff; background: #ff615e; border-radius:6rpx; margin-right: 10rpx;}
  .listbox1 .box .bt1 .oprice{font-size:26rpx; color: #ccc; text-decoration: line-through; display: block; }
  .listbox1 .box .bt1 .num{color: #999; font-size: 26rpx;}
  .listbox1 .box .bt1 .num text{color: #f60; font-size: 32rpx;}
